<template>
  <view>
    <view class="flex pt-10 items-center">
      <view class="flex items-center">
        <view @click.stop="showTip = !showTip">
          <view class="text-bold text-16">99.7%</view>
          <view class="flex mt-4">
            <text class="text-12 color-gray">惊艳度</text>
            <view class="reactive">
              <view class="question-circle-tip" v-if="showTip">
                惊艳度是指购买用户对商品品质5分评价的占比值
              </view>
              <u-icon name="question-circle" size="24rpx" color="#999"></u-icon>
            </view>
          </view>
        </view>
        <view class="u-border-left pl-12 ml-12">
          <u-rate
            :count="5"
            :value="4.8"
            size="56rpx"
            gutter="4rpx"
            active-color="#f6dc67"
            allowHalf
            readonly
          ></u-rate>
        </view>
      </view>
    </view>
    <view class="flex flex-wrap gap-8 mt-12">
      <view
        class="u-page__tag-item"
        v-for="(item, index) in radios"
        :key="index"
      >
        <u-tag
          :text="item.label"
          :plain="!item.checked"
          type="error"
          size="mini"
          shape="circle"
          :name="index"
          @click="radioClick"
        >
        </u-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "goodDegreeSurprise",
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showTip: false,
      radios: [
        {
          label: "发货速度快(9739)",
          checked: false,
        },
        {
          label: "价格实惠(9739)",
          checked: false,
        },
        {
          label: "品质惊艳(9739)",
          checked: false,
        },
        {
          label: "质量杠杠的(9739)",
          checked: false,
        },
        {
          label: "性价比高(9739)",
          checked: false,
        },
      ],
    };
  },
  methods: {
    radioClick(name) {
      console.log("点击", name);
      this.$emit("change", name);
      if (this.readonly) return;
      this.radios.map((item, index) => {
        item.checked = index === name ? true : false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.question-circle-tip {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap;

  top: -80rpx;
  left: -60rpx;
  padding: 12rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: white;
  &::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-top: 12rpx solid rgba(0, 0, 0, 0.6);
    bottom: -12rpx;
    left: 60rpx;
  }
}
</style>
